<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>搜索优惠券页面</title>
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
    <link rel="stylesheet" href="../../resource/css/style.css">
</head>
<body>
<form id="header" style="position: relative">
    <div style="float: left;margin-left: 5%;">
        <span id="btn_1">&#xe62b;</span>
        <input id="search_shops" type="text" placeholder=" 请输入关键词">
    </div>
    <a class="come_back">返回</a>
</form>
<!--主要的内容部分-->
<div class="search_coupon_index">
    <!----------------------------按标签搜索--------------------->
    <div class="search_type">
        <h3 class="search_label cook-type">按标签搜索</h3>
        <div class="type-list" id="label_list"><ul></ul></div>
    </div>
    <!----------------------------搜索的历史记录-------------------->
    <div class="search_history">
        <h3 class="search_label cook-type" style="border-top: 1px solid rgb(240, 240, 240);">历史搜索</h3>
    </div>
    <!---------------------------选择的标签--------------------------->
    <div class="search_result">
        <div class="search_select"></div>
        <div>
            <button class="search_cancel">取消</button>
            <a onclick="showResult()">确认</a>
        </div>
    </div>
</div>

<div class="shops_associate">
    <ul></ul>
</div>
<div class="search_coupon_result">
    <div class="first_div"></div>
    <div class="second_div"></div>
</div>
<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="sanFast-btn"
                        data-dismiss="modal">返回
                </button>
                <button type="button" class="sanFast-btn release">
                    是
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade position_change" id="Modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="sanFast-btn"
                        data-dismiss="modal">返回
                </button>
            </div>
        </div>
    </div>
</div>

<script src="../../resource/js/jquery.min.js"></script>
<script src="../../resource/js/bootstrap.min.js"></script>
<script src="../../resource/js/commonjs.js"></script>
<script src="../../resource/js/ReceiveAndConvert.js"></script>
<script>
    var m=1;
    $(function() {
        historyInit();
        get_label();
    });
    var back_flag=false;
    $('.come_back').click(function() {
        $('.back').css({'color':'rgb(0,170,144)'});
        if(back_flag==false){
            history.go(-1);   //如果处在搜索之前，点击返回就返回主页
        }else if(back_flag==true){
            $(".search_coupon_result").hide();
            $(".search_coupon_index").show();
            $(".type-list ul li").removeClass("active");
            $(".search_history").show();
            $(".search_select").text("");
            m=0;
            $(".search_result").hide();
            $("#search_shops").val("");
            $(".shops_associate").hide();
            back_flag=false;   //返回搜索之前的状态
            $(".shops_noResult").remove();
        }
    });
    /*  取消按标签搜索  */
    $(".search_cancel").click(function() {
        $(".search_history").show();
        $(".search_select").html("");
        $(".search_result").hide();
        $(".type-list ul li").removeClass("active");
    });
    /*点击标签添加标签*/
    function label_targetBind() {
        $('#label_list>ul>li').click(function() {
            $(".search_history").css({"display":"none"})
            $(".search_result").css({"display":"block"})
            var data_id=$(this).attr("data_id");
            if(m<=5){
                if($(this).hasClass("active")){
                    $(this).removeClass("active");
                    $(".search_select label[data-id="+data_id+"]").remove();
                    m--;
                }else{
                    $(this).addClass("active");
                    $(".search_select").append("<label data-id="+data_id+">"+$(this).text()+"</label>");
                    m++;
                }
            }else{
                if($(this).hasClass("active")){
                    $(this).removeClass("active");
                    $(".search_select label[data-id="+data_id+"]").remove();
                    m--;
                }else{
                    $('#Modal .modal-body').text("您最多只能选择5个标签！");
                    $("#Modal .modal-footer button:nth-of-type(1)").text("返回");
                    $("#Modal .modal-footer button:nth-of-type(1)").css({"margin-left":"20%"});
                    $('#Modal').modal();
                }
            }
        });
    }
    /*-----------------词汇联想-------------------------*/
    $("#search_shops").bind("keydown",function(e){
        var key = e.which;
        var keyword = $("#search_shops").val();
        if(key==13){
            e.preventDefault();
            $("#btn_1").click();
            $(".first_div").text("");
            $(".second_div").text("");
        }
        if(key==8 && keyword.length <= 1){
            $(".shops_associate ul").text("");
            $(".first_div").text("");
            $(".second_div").text("");
        }
    })
    var bind_name = 'input';
    if (navigator.userAgent.indexOf("MSIE") != -1){
        bind_name = 'propertychange';
    }
    /*-------------点击搜索店铺---------------------*/
    $("#btn_1").click(function() {
        var keyword = $("#search_shops").val();
        var url = "/Shops/searchShops";
        var arg = {};
        arg.keyword = keyword;
        ajaxJsonp(url, arg, click_search);
        var keyword = $("#search_shops").val();
        addHistory(keyword);  //点击搜索图标时添加历史记录
    });
    function click_search(res){
        $(".search_coupon_index").hide();
        $(".shops_associate").show();
        back_flag=true;
        var html = "";
        if(res.data.length==0){
            html += '<div class="shops_noResult">未找到您搜索的商家，请重新输入！</div>';
        }else{
            for(var i=0;i<res.data.length;i++){
                var business_name=res.data[i].business_name;
                var shop_name=res.data[i].shop_name;
                var shop_id=res.data[i].shop_id;
                html +='<li><a class="'+shop_id+'" onclick="getShopsCouponList(this)">'+shop_name+'('+business_name+')'+'</a></li>';
            }
        }
        $(".shops_associate ul").html(html);
    }
    /*------- 获取店铺id实现异步刷新页面页面-----*/
    function getShopsCouponList(target){
        $(".shops_associate ul").html("");
        $(".search_coupon_result").show();
        $(".first_div").text("");
        $(".second_div").text("");
        var shop_id=$(target).attr("class");
        init(shop_id);
        var keyword=$(target).text();
        addHistory(keyword);
    }
    function init(id){
        var url = "/shops/getShopExInfo";
        var arg = {};
        arg.shop_id=id;
        ajaxJsonp(url, arg, result);
        function result(res){
            var shop_id=res.data[id].id;
            var up_count=res.data[id].up_count;
            var url = "/Shops/getShopsCouponList";
            var arg = {};
            arg.shop_id=shop_id;
            ajaxJsonp(url, arg, shop_couponList);
            function shop_couponList(res){
                /*名字*/
                var business_name=res.data.shop_info.business_name;
                var name=res.data.shop_info.name;
                /*点赞数*/
                var heart= '<h3 class="search_label cook-type">'+business_name+name+'</h3>' +
                        '<div class="zan_num" onclick="zan(this,otherLinkLogin)" data-id="'+shop_id+'">'+
                        '<div class="aaa"></div>'+
                        '<span class="heart_num">'+up_count+'</span>'+
                        '</div>'
                $(".search_coupon_result .first_div").append(heart);
                /*优惠券信息*/
                var juli = res.data.shop_info.juli;
                var label_list = res.data.shop_info.label_list;//数组
                for(var i=0;i<res.data.coupon_list.length;i++){
                    var discount = res.data.coupon_list[i].discount;
                    var image = res.data.shop_info.image;
                    var coupon_count=res.data.coupon_list[i].coupon_count;
                    var for_count=res.data.coupon_list[i].for_count;  //表示剩余的数量
                    var percent=(for_count/coupon_count)*100;  //计算未领取的数量的百分比
                    /*时间的转换*/
                    var start_time=res.data.coupon_list[i].start_time;  //开始时间
                    var expired_time=res.data.coupon_list[i].expired_time;  //结束时间
                    var start_time1=timeChange(start_time).substr(2, 7);
                    var expired_time1=timeChange(expired_time).substr(2, 7);
                    var labelList=res.data.shop_info.label_list;
                    var credit=res.data.coupon_list[i].credit;
                    var id=res.data.coupon_list[i].id;
                    var shop_couponList_1= '<div class="index_stores">' + '<div class="store_detail">'+
                            '<div><label class="label_8">'+discount+'</label><img src='+image+'></div>'+
                            '<ul>'+ '<li>'+business_name+'('+name+')</li>'+
                                '<li>'+labelList[0]+' '+labelList[1]+' '+labelList[2]+' '+labelList[3]+'</li>'+
                                '<li>'+500+'</li>'+ '<li>'+start_time1+'-'+expired_time1+'</li>'+
                            '</ul>'+
                            '</div>'+
                            '<div class="pinjia">'+
                            '<div class="discuss">'
                    if(credit==0){
                        var shop_couponList_2= '<div class="progress">'+
                                '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:'+percent+'%;"></div>'+
                                '</div>'+
                                '<label class="number"> <span class="numberOne">'+for_count+'</span><span style="margin-left: 10px;">'+coupon_count+'</span></label>'+
                                '</div>'+
                                '<p class='+for_count+' data-id='+id+' onclick="receive(this,otherLinkLogin)">领取</p>'+'</div></div>'
                    }else{
                        var shop_couponList_2='</div><p>'+ '<span class="user_jifen">'+credit+'积分 </span>'+
                                '<span class='+for_count+' data-id='+id+' onclick="convert('+credit+','+id+',otherLinkLogin)"> 兑换</span>'+
                                '</p>'+'</div></div>'
                    }
                    $(".second_div").append(shop_couponList_1+shop_couponList_2);
                }
            }
            getShopIsUserGiving(id);
        }
    }


    /*-------------获取标签---------------------*/
    function get_label(){
        var url = "/Config/getSearchLabelList";
        var arg = {};
        ajaxJsonp(url, arg, labelList);
    }
    function labelList(res){
        var data = res.data;
        for(var i=0;i<data.length;i++){
            var id = data[i].id;
            var name = data[i].name;
            var labelList = '<li data_id="'+id+'">'+name+'</li>';
            $("#label_list ul").append(labelList);
        }
        label_targetBind();
    }

    /*----------添加搜索的历史记录------------*/
    function addHistory(keyword){
        var url = "/Shops/addSearchRecord";
        var arg = {};
        arg.keyword = keyword;
        ajaxJsonp(url, arg, addHistoryResult,"post");
    }
    function addHistoryResult(res){
        //没有返回，返回函数为空;
    }
    /*-------------获取搜索的历史记录--------*/
    function historyInit() {
        var token = getCookie("token");
        if(token==null||token==-1||token==undefined){
            $('#myModal').modal("hide");
        }else{
            $(".search_history").append('<div class="history_show"></div>');
            var url = "/Account/getSearchRecord";
            var arg = {};
            ajaxJsonp(url, arg, userHistory);
        }
    }
    function userHistory(res){
        var data=res.data;
        if(data.length>0){
            for(var i=0;i<data.length;i++){
                var history=data[i];
                $(".history_show").append('<a onclick="historyLink(this)">'+history+'</a>')
            }
        }
    }
    function historyLink(target){}

    /*点击确认显示标签搜索的结果*/
    function showResult(){
        var keyword = $("#search_shops").val();
        var url = "/Shops/searchShops";
        var arg = {};
        arg.keyword = keyword;
        var arr=[];
        $(".search_select label").each(function(i,obj){
            arr.push($(obj).attr("data-id"));
        })
        arg.label_id=arr.join(",");
        $(".shops_noResult").text(" ");
        $('.shops_associate ul').text(" ");
        ajaxJsonp(url, arg, click_search);
    }

</script>
</body>
</html>
